<template>
  <div style="padding:10px;">
    <div class="menu-item-group">
      <div class="menu-item-label">工单</div>
      <el-menu router class="el-menu-vertical-demo">
        <el-menu-item
          :class="[activeRoute.endsWith(item.path)?'active':'']"
          v-for="item in selectItems"
          :key="item.path"
          :index="item.path"
        >
          <span slot="title">{{item.label}}</span>
        </el-menu-item>
      </el-menu>
    </div>
    <div class="order-item-group">
      <router-view :tableData="tableData"></router-view>
    </div>
  </div>
</template>

<script>
  import api from "@/api/api";
export default {
  name: "Order",
  components: {},
  props: {},
  data() {
    return {
      activeRoute: "/order/all-order",
      selectItems: [
        {
          path: "/order/all-order",
          label: "全部工单(1000)"
        },
        {
          path: "pendingOrder",
          label: "待我处理的(100)"
        },
        {
          path: "createdOrder",
          label: "我创建的(0)"
        },
        {
          path: "sendedOrder",
          label: "抄送我的(0)"
        },
        {
          path: "handledOrder",
          label: "我处理的(0)"
        },
        {
          path: "solvedOrder",
          label: "我解决的(0)"
        }
      ],
      tableData: [],
      totalData: 0,
      currentPage: 1,
      pageSize: 10
    };
  },
  watch: {
    $route() {
      this.setRoute();
    }
  },
  computed: {},
  methods: {
    setRoute() {
      this.activeRoute = this.$route.path;
    },
    getPageData(){
      api
        .getAllOrderAPI({
          page: this.currentPage,
          limit: this.pageSize
        })
        .then(res => {
          let { error, data } = res.data;
          if (error) {
            this.$message.error(data);
          } else {
            this.totalData = data.total;
            this.tableData = data.page;
          }
        })
    }
  },
  created() {
    this.getPageData();
  },
  mounted() {}
};
</script>

<style scoped>
.el-menu-vertical-demo {
  width: 250px;
  height: 100vh;
  /* border-radius: 5px; */
}
.menu-item-label {
  width: 230px;
  background-color: #fff;
  height: 50px;
  border-top-left-radius: 5px;
  border-top-right-radius: 5px;
  color: #acacac;
  padding-left: 20px;
  line-height: 50px;
}
.menu-item-group {
  position: fixed;
  left: 75px;
  top: 75px;
}
.order-item-group {
  margin-left: 260px;
  margin-top: 5px;
}
.active {
  background-color: #e6f1ff !important;
  color: #0166ed;
  border-left: 4px solid #006eff;
}
</style>
